<template>
  <div>
    <footer>
      <div class="footer">
        <div class="about-me">
          <ul>
            <li>
              <h1>关于我们</h1>
            </li>
            <li>zsjx forum，在这里发布个人观点的同时，也在一路，
              摸索帮助更多的人成为独立开发者，欢迎订阅rss。
            </li>
            <li>
              <p>Zhongshan,Guangdong forum,China</p>
            </li>
            <li>
              <p>larry@zsjx forum.com</p>
            </li>
          </ul>
        </div>
        <div>
          <div>
            <p>商务合作</p>
            <ul>
              <li><a href="#">论坛咨讯</a></li>
              <li><a href="#">开发应用推荐</a></li>
              <li><a href="#">精选贴吧推荐</a></li>
              <li><a href="#">Price Tag访谈</a></li>
              <li><a href="#">ZuiMei应用推荐</a></li>
            </ul>
          </div>
          <div>
            <p>论坛贴吧</p>
            <ul>
              <li><a href="#">电商贴吧</a></li>
              <li><a href="#">游戏贴吧</a></li>
              <li><a href="#">外贸贴吧</a></li>
              <li><a href="#">程序贴吧</a></li>
              <li><a href="#">设计贴吧</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <div id="copyright">
      <!--      <p>copyright©世赛小组</p>-->
      <a href="https://beian.miit.gov.cn/" target="_blank">
        <img data-src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" class="ali-report-img"
             src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png">
        <p>粤ICP备2022053336号-1</p>
      </a>
    </div>
  </div>
</template>
<script>


export default {
  name: "publicFooter",
  data() {
    return {};
  }

}
</script>

<style lang="less">
footer {
  border-top: 2px solid #ECECEC;
  width: 100%;
  background: #fff;

  .footer {
    width: 1200px;
    height: 330px;
    margin: 0 auto;
    padding: 24px 0 48px;
    display: flex;
    justify-content: space-between;
    font-family: Microsoft YaHei;
  }

  .footer > div {
    display: flex;
  }

  .footer .about-me ul {
    width: 461px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }

  .footer .about-me ul li h1 {
    font-size: 22px;
    font-weight: 400;
  }

  .footer .about-me ul li {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
  }

  .footer > div:not(.about-me) {
    gap: 120px;
  }

  .footer > div:not(.about-me) p {
    font-size: 20px;
    margin-bottom: 40px;
  }

  .footer > div:not(.about-me) ul {
    width: 130px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
}

#copyright {
  height: 50px;
  background: #FFFFFF;
  border-top: 2px solid #ECECEC;
  border-bottom: 2px solid #ECECEC;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  img {
    width: 20px;
  }
}
</style>

